<!--
 * @description 文字页脚组件
 * @date 2022/11/12
 -->
<template>
  <div
    class="text-footer-comp"
    :style="{
      paddingTop,
      paddingRight,
      paddingBottom,
      paddingLeft,
      'text-align': footerPosition,
      'margin-top': top,
      'background-image': `url(${imgBg})`,
      'background-repeat': 'no-repeat',
      'background-size': '100% 100%',
      'background-position': 'top center',
    }"
  >
    <section class="main-footer">
      <section class="footer-item">
        <template v-if="dataList.length > 0">
          <section
            v-for="(item, index) in dataList"
            :key="index"
            class="item-label"
          >
            {{ item.value }}
          </section>
        </template>
      </section>
    </section>
  </div>
</template>

<script>
import mixins from './../mixins'
export default {
  name: 'TextFooter',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dataList: [
        { value: '主办方：XXXXXXXXXX公司' },
        { value: '技术支持：XXXXXXXXXX有限责任公司' },
        { value: '内容支持：XXXXXXXXXX杂志社' }
      ]
    }
  },
  computed: {
    footerPosition() {
      return this.option.footerPosition || 'center'
    },
    // 背景图片
    imgBg() {
      return this.option.imgBg
    }
  },
  created() {
    if (this.isInitData) {
      this.initData()
    }
  },
  methods: {
    setData(result) {
      this.dataList = JSON.parse(result.dataList.data.configValue)
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/var.scss";
@import "@/styles/utility/rem.scss";
.main-footer {
  // margin: rem(40) auto 0;
  // text-align: left;
  height: rem(100);
  padding-left: rem(30);
  .item-label {
    margin-bottom: rem(5);
    // text-align: center;
    font-size: rem(20);
    font-family: PingFang SC;
    font-weight: 400;
    color: #999999;
  }
}
</style>
